<template>
  <div class="comment-info" v-if="Object.keys(commentInfo).length">
    <div class="comment-top">
      <span class="comment-title">用户评价</span>
      <span class="comment-more">更多</span>
    </div>

    <div class="comment-user" v-if="commentInfo.user">
      <img :src="commentInfo.user.avatar" />
      <span>{{commentInfo.user.uname}}</span>
    </div>

    <div class="comment-option">
      <span>{{commentInfo.created | formatDate}} </span>
      <span>{{commentInfo.style}}</span>
    </div>

    <div class="content">
      {{commentInfo.content}}
    </div>
    <div class="comment-img" v-if="commentInfo.images">
      <img v-for="item in commentInfo.images" :src="item"/>
    </div>
    </div>
  <div class="comment-info" v-else>
    <p>现在还没有评论，快来评论吧</p>
  </div>
</template>

<script>
  import {dateFormat} from 'common/util'

  export default {
    name: "DetailCommentInfo",
    props: {
      commentInfo: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    filters: {
      formatDate(timestamp) {
        return dateFormat(new Date(timestamp*1000), 'yyyy-MM-dd')
      }
    }
  }
</script>

<style scoped>
  .comment-info {
    padding: 10px 10px 20px 10px;
    border-bottom: 3px solid #f2f5f8;
    background-color: var(--color-background);
  }

  .comment-info p {
    text-align: center;
  }

  .comment-top {
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f5f8;

    display: flex;
    justify-content: space-between;
  }

  .comment-user {
    margin-top: 15px;
    display: flex;
    align-items: center;
  }

  .comment-user img {
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
    width: 8%;
    margin-right: 10px;
  }

  .content {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .comment-option {
    margin-top: 7px;
    font-size: 14px;
    color: #757b7e;
  }

  .comment-img {
    display: flex;
  }

  .comment-img img {
    margin-right: 3%;
    width: 31%;
  }

  .comment-img img:last-child {
    margin-right: 0px;
  }

</style>